<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:j="http://tags"
                xmlns:p="http://primefaces.org/ui"
                template="/facelets/templateMenu.xhtml"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:define name="head">
        <title>e-Home - Ações</title>
    </ui:define>

    <ui:define name="body">
        <h:form id="frmAcao">
            <p:remoteCommand id="cmdNovoAcao"
                             name="novoAcao"
                             actionListener="#{acaoController.novo()}"
                             update="pnlAcaoTitulo, pnlAcaoDados"
                             oncomplete="$('#modal-acao').modal('show'); return false;"/>

            <p:remoteCommand id="cmdAlterarAcao"
                             name="alterarAcao"
                             update="pnlAcaoTitulo, pnlAcaoDados"
                             actionListener="#{acaoController.alterar()}"
                             oncomplete="$('#modal-acao').modal('show'); return false;"/>

            <p:remoteCommand id="cmdExcluirAcao"
                             name="excluirAcao"
                             update="lblAcaoExcluir"
                             actionListener="#{acaoController.excluir()}"
                             oncomplete="$('#modal-acao-excluir').modal('show'); return false;"/>

            <p:remoteCommand id="cmdConfirmarExclusaoAcao"
                             name="confirmarExclusaoAcao"
                             update="dtbAcao"
                             actionListener="#{acaoController.confirmarExclusao()}"
                             oncomplete="$('#modal-acao-excluir').modal('hide'); return false;"/>

            <p:remoteCommand id="cmdCancelarExclusaoAcao"
                             name="cancelarExclusaoAcao"
                             onstart="$('#modal-acao-excluir').modal('hide'); return false;"/>

            <p:remoteCommand id="cmdSalvarAcao"
                             name="salvarAcao"
                             update="dtbAcao"
                             actionListener="#{acaoController.salvar()}"
                             oncomplete="$('#modal-acao').modal('hide'); return false;"/>

            <p:remoteCommand id="cmdCancelarAcao"
                             name="cancelarAcao"
                             onstart="$('#modal-acao').modal('hide'); return false;"/>

            <div id="modal-acao" class="modal hide fade">
                <div class="modal-header">
                    <p:outputPanel id="pnlAcaoTitulo">
                        <h:panelGrid columns="2" cellpadding="5">
                            <p:graphicImage value="/resources/img/#{(acaoController.operacao == consUtilController.operacaoNOVO) ? 'actionAdd' : (acaoController.operacao == consUtilController.operacaoALTERAR) ? 'actionEdit' : 'action'}.png" />
                            <h3 id="modal-title">#{(acaoController.operacao == consUtilController.operacaoNOVO) ? 'Nova Ação' : (acaoController.operacao == consUtilController.operacaoALTERAR) ? 'Alterar Ação' : 'Ação'}</h3>
                        </h:panelGrid>
                    </p:outputPanel>
                </div>
                <div class="modal-body">
                    <p class="center" id="modal-content">
                        <h:panelGrid columns="2" cellpadding="5" cellspacing="5" id="pnlAcaoDados" style="width: 500px;">
                            <h:outputLabel value="Grupo:"
                                           style="font-weight: bold; text-align: right;"/>
                            <h:selectOneMenu value="#{acaoController.acaoSelecionado.acaoGrupo}"
                                             converter="genericConverter">
                                <f:selectItems value="#{acaoController.acaoGrupos}"
                                               var="acaoGrupo"
                                               itemValue="#{acaoGrupo}"
                                               itemLabel="#{acaoGrupo.agrNome}"/>
                            </h:selectOneMenu>

                            <h:outputLabel value="Nome:"
                                           style="font-weight: bold; text-align: right;"/>
                            <p:outputPanel styleClass="input-prepend">
                                <span class="add-on"><i class="icon-font"></i></span>
                                <h:inputText id="txtAcaoDescricao"
                                             value="#{acaoController.acaoSelecionado.acaoDescricao}"
                                             class="input-block-level"
                                             style="width: 100%;"/>
                            </p:outputPanel>
                            <h:outputLabel value="Ativo:"
                                           style="font-weight: bold; text-align: right;"/>
                            <j:booleanButton id="ativo"
                                             value="#{acaoController.acaoSelecionado.acaoAtivo}"
                                             update=":frmAcao:pnlAcaoDados"/>
                        </h:panelGrid>
                    </p>
                </div>
                <div class="modal-footer">
                    <button id="btnSalvarAcao"
                            type="button"
                            class="btn btn-primary"
                            onclick="salvarAcao();">
                        <i class="icon-ok icon-white"></i>
                        Salvar
                    </button>

                    <button id="btnCancelarAcao"
                            type="button"
                            class="btn"
                            onclick="cancelarAcao();">
                        <i class="icon-remove"></i>
                        Cancelar
                    </button>
                </div>
            </div>

            <div id="modal-acao-excluir" class="modal hide fade">
                <div class="modal-header">
                    <h:panelGrid columns="2" cellpadding="5">
                        <p:graphicImage value="/resources/img/actionRem.png" />
                        <h3 id="modal-title">Excluir Ação</h3>
                    </h:panelGrid>
                </div>
                <div class="modal-body">
                    <p class="center" id="modal-content">
                        <p:outputLabel id="lblAcaoExcluir"
                                       value="Deseja realmente excluir o ação #{acaoController.acaoSelecionado.acaoDescricao}?"/>
                    </p>
                </div>
                <div class="modal-footer">
                    <button id="btnConfirmarExclusao"
                            type="button"
                            class="btn btn-danger"
                            onclick="confirmarExclusaoAcao();">
                        <i class="icon-trash icon-white"></i>
                        Excluir
                    </button>

                    <button id="btnCancelarExclusao"
                            type="button"
                            class="btn"
                            onclick="cancelarExclusaoAcao();">
                        <i class="icon-remove"></i>
                        Não, espere!
                    </button>
                </div>
            </div>

            <div class="page-header">
                <h:panelGrid columns="2" cellpadding="5">
                    <p:graphicImage value="/resources/img/action.png" />
                    <h1>Ações</h1>
                </h:panelGrid>

                <button id="btnNovoAcao"
                        type="button"
                        class="btn btn-primary"
                        onclick="novoAcao();">
                    <i class="icon-plus icon-white"></i>
                    Nova
                </button>
            </div>

            <p:dataTable id="dtbAcao"
                         value="#{acaoController.acoes}"
                         filteredValue="#{acaoController.acoesFiltrados}"
                         rowKey="#{acao.acaoCodigo}"
                         filterEvent="enter"
                         var="acao"
                         emptyMessage="Nenhuma ação encontrada.">

                <p:column id="colDescricao"
                          headerText="Ação"
                          filterBy="#{acao.acaoDescricao}"
                          filterMatchMode="contains"
                          sortBy="#{acao.acaoDescricao}"
                          style="text-align: center;">
                    #{acao.acaoDescricao}
                </p:column>

                <p:column id="colGrupo"
                          headerText="Grupo"
                          filterBy="#{acao.agrNome}"
                          filterMatchMode="contains"
                          sortBy="#{acao.agrNome}"
                          style="text-align: center;">
                    #{acao.agrNome}
                </p:column>

                <p:column id="colAtivo"
                          headerText="Ativo"
                          filterBy="#{acao.acaoAtivoDesc}"
                          filterMatchMode="contains"
                          sortBy="#{acao.acaoAtivoDesc}"
                          style="text-align: center; width: 70px;">
                    #{acao.acaoAtivoDesc}
                </p:column>

                <p:column id="colAcoes"
                          style="text-align: center; width: 100px;">
                    <button id="btnAlterarAcao"
                            type="button"
                            class="btn"
                            onclick="alterarAcao([{name: 'acaoCodigo', value: #{acao.acaoCodigo}}]);"
                            style="margin-right: 2px;">
                        <i class="icon-pencil"></i>

                    </button>
                    <button id="btnExcluirAcao"
                            type="button"
                            class="btn btn-danger"
                            onclick="excluirAcao([{name: 'acaoCodigo', value: #{acao.acaoCodigo}}]);">
                        <i class="icon-trash icon-white"></i>

                    </button>
                </p:column>
            </p:dataTable>
        </h:form>
    </ui:define>
</ui:composition>